<template>
	<div class="page-wrapper">
		<div style="height:100%; background:#fff;">
			<div class="box">
				<div style="font-weight:bold; line-height:var(--24FontSize);">选择空间维度</div>
				<FlexSelect :payload="fieldList" style="margin:calc(var(--sPadding)/2) 0;" :data="opt" :form="form" />
				<div style="display:flex; align-items:center;margin:var(--sPadding) 0;">
					<el-icon color="#99a0ae">
						<InfoFilled />
					</el-icon>
					<span>绑定平台中的维度，用于关联检查对象的位置信息</span>
				</div>
				<div class="flex-btn large" style="margin:var(--mPadding) 0;width:100%;" @click="handleSubmit">保存</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { reactive, onMounted, ref } from 'vue';
	import { getFieldList, getRelatedField, saveRelatedField } from '@/api/cycle.js';
	import { InfoFilled } from '@element-plus/icons-vue'
	import FlexSelect from '@/components/FlexSelect.vue';
	import { ElMessage } from 'element-plus'

	const fieldList = ref([]);
	const form = reactive({ field:'' });
	const opt = { paramKey:'field', fullWidth:true, labelName:'fieldName', labelKey:'fieldId' };
	const fetchField = ()=>{
		getRelatedField()
		.then(res=>{
			if ( res.data.code === 200 ){

			}
		})
	}
	const fetchFieldList = ()=>{
		getFieldList()
		.then(res=>{
			if ( res.data.code === 200 ) {
				fieldList.value = res.data.data;
			}
		})
	}
	const fetchRelatedField = ()=>{
		getRelatedField()
		.then(res=>{
			if ( res.data.code === 200 ) {
				if ( res.data.data ){
					form.field = res.data.data.fieldId;
				}
			}
		})
	}
	const handleSubmit = ()=>{
		if ( !form.field ) {
			ElMessage.error('请选择空间纬度');
			return;
		}
		saveRelatedField({ fieldId:form.field })
		.then(res=>{
			if ( res.data.code === 200 ){
				ElMessage({
					type:'success',
					message:'设置维度成功！'
				})
			}
		})
	}
	onMounted(()=>{
		fetchFieldList();
		fetchRelatedField();
	})
</script>

<style lang="scss">
	.box {
		width:20vw;
		margin:0 auto;
		padding-top:6vh;
	}
</style>